<template>
  <view class="tracks">
    <u-popup
      v-model="showPopup"
      :closeable="true"
      border-radius="20"
      :safe-area-inset-bottom="true"
      mode="bottom"
    >
      <view class="popup-content">
        <view class="page-title">{{ title }}轨迹</view>
        <u-time-line>
          <u-time-line-item nodeTop="8" v-for="(item, index) in list" :key="index">
            <template v-slot:node>
              <view :class="index === 0 ? 'u-active-node' : 'u-node'"></view>
            </template>
            <template v-slot:content>
              <view>
                <view
                  class="u-order-title"
                  :style="{ color: index > 0 ? '#999' : '#666' }"
                >
                  <text v-if="item.orderStatus">{{OrderStatusEnum.data.find(val => val.value === item.orderStatus)?.name }}</text>
                  <text v-else>{{ RefundStatusEnum.data.find(val => val.value === item.refundStatus)?.name }}</text>
                  <text color="t-l">{{ item.time || '--' }}</text>
                </view>
                <view class="u-order-desc oneline-hide" v-if="item.operator">
                  <text>{{item.operator }}</text>
                  <text class="m-l-20">{{ item.remarks }}</text>
                </view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </view>
    </u-popup>
  </view>
</template>
<script>
import OrderStatusEnum from "@/common/enum/order/orderStatus"
import RefundStatusEnum from "@/common/enum/order/refundStatus"

export default {
  name: "tracks",
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      OrderStatusEnum,
      RefundStatusEnum,
      showPopup: false
    }
  },
  computed: {
    title() {
      return this.list.some(item => item.orderStatus) ? '订单' : this.list.some(item => item.refundStatus) ? '退单' : '配送'
    },
  },
  methods: {
    show() {
      this.showPopup = true
    },
  }
}
</script>

<style scoped lang="scss">
.tracks {
  .popup-content {
    padding: 24rpx 32rpx;

    .page-title {
      font-size: 32rpx;
      font-weight: 500;
      text-align: center;
      margin-bottom: 50rpx;
    }

    .u-order-title {
      display: flex;
      justify-content: space-between;
    }

    .u-active-node {
      width: 20rpx;
      height: 20rpx;
      background: #2d71fd;
      border-radius: 50%;
    }

    .u-node {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      border: 1px solid #cccccc;
    }

    .u-order-desc {
      font-size: 24rpx;
      color: #999999;
      margin-top: 8rpx;
      width: 100%;
    }
  }
}
</style>
